<!--还款计划信息-->
<template>
  <Card>
    <Content style="margin-top:20px;">
      <Table :columns="columns2" :data="repaymentPlanData"></Table>
    </Content>
    <div>
      <Page :total="totalPage" :current="currentPage" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
    </div>
    <Modal v-model="modal1" title="详情信息">
      <div style="height:400px;overflow: auto;">
        <Row type="flex">
          <Col span="4" order="1" class="row-col-style">客户编号:</Col>
          <Col span="2" order="2"> {{planInfo.customerId}}
          </Col>
          <Col span="4" order="3" class="row-col-style">状态:</Col>
          <Col span="4" order="4"> {{this.statusName(planInfo.status)}}
          </Col>
          <Col span="4" order="5" class="row-col-style">期数:</Col>
          <Col span="2" order="6"> {{planInfo.tenor}}
          </Col>
        </Row>
        </br>
        <Row type="flex">
          <Col span="4" order="1" class="row-col-style">应还款日期:</Col>
          <Col span="2" order="2" style="width:10.33333%;"> {{this.$util.loanModularFormatTime(planInfo.paymentDate)}}
          </Col>
          <Col span="4" order="3" class="row-col-style">最迟还款日期:</Col>
          <Col span="4" order="4"> {{this.$util.loanModularFormatTime(planInfo.paymentDateLate)}}
          </Col>
          <Col span="4" order="5" class="row-col-style">代偿状态:</Col>
          <Col span="2" order="6"> {{this.repaymentType(planInfo.repaymentType)}}
          </Col>
        </Row>
        <Row type="flex">

          <Col span="4" order="1" class="row-col-style">实际还款日期:</Col>
          <Col span="2" order="2"> {{this.$util.loanModularFormatTime(planInfo.paymentDateAct)}}
          </Col>
          <Col span="4" order="3" class="row-col-style">延滞天数:</Col>
          <Col span="4" order="4"> {{planInfo.delqDays}}
          </Col>
        </Row>

        </br>

        <Row type="flex">
          <Col span="4" order="1"></Col>
          <Col span="3" order="2" class="row-col-style">本金:</Col>
          <Col span="3" order="3" class="row-col-style">利息:</Col>
          <Col span="3" order="4" class="row-col-style">咨询费:</Col>
          <Col span="3" order="5" class="row-col-style">管理费:</Col>
          <Col span="3" order="6" class="row-col-style">违约金:</Col>
          <Col span="3" order="7" class="row-col-style">滞纳金:</Col>
        </Row>
        <Row type="flex">
          <Col span="4" order="1" class="row-col-style"> 计划收取
          </Col>
          <Col span="3" order="2"> {{planInfo.principal-planInfo.principalWaive}}
          </Col>
          <Col span="3" order="3"> {{planInfo.interest-planInfo.interestWaive}}
          </Col>
          <Col span="3" order="4"> {{planInfo.consultingFee-planInfo.consultingFeeWaive}}
          </Col>
          <Col span="3" order="5"> {{planInfo.managementFee-planInfo.managementFeeWaive}}
          </Col>
          <Col span="3" order="6"> {{planInfo.penaltyFee-planInfo.penaltyFeeWaive}}
          </Col>
          <Col span="3" order="7"> {{planInfo.lateFee-planInfo.lateFeeWaive}}
          </Col>
        </Row>
        <Row type="flex">
          <Col span="4" order="1" class="row-col-style"> 已还金额
          </Col>
          <Col span="3" order="2"> {{planInfo.principalAct}}
          </Col>
          <Col span="3" order="3"> {{planInfo.interestAct}}
          </Col>
          <Col span="3" order="4"> {{planInfo.consultingAct}}
          </Col>
          <Col span="3" order="5"> {{planInfo.managementFeeAct}}
          </Col>
          <Col span="3" order="6"> {{planInfo.penaltyFeeAct}}
          </Col>
          <Col span="3" order="7"> {{planInfo.lateFeeAct}}
          </Col>
        </Row>
        </br>
        <Row type="flex">
          <Col span="6" order="1" class="row-col-style">最后更新时间:</Col>
          <Col span="6" order="2"> {{this.$util.loanModularFormatTime(planInfo.updatedDate)}}
          </Col>
          <Col span="6" order="3" class="row-col-style">最后更新用户:</Col>
          <Col span="6" order="4"> {{planInfo.updatedBy}}
          </Col>
        </Row>
      </div>
    </Modal>
  </Card>
</template>
<script>
export default {
  name: 'repayment-plan-info-form',
  data () {
    return {
      repaymentPlanData: [],
      planInfo: {},
      modal1: false,
      columns2: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '期数',
          key: 'tenor',
          align: 'center'
        },
        {
          title: '还款状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            if (params.row.status === 0) { /// 正常
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '正常')
            }
            if (params.row.status === 1) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '逾期')
            }
            if (params.row.status === 2) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '结清')
            }
            if (params.row.status === 3) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }
            if (params.row.status === 10) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '核销')
            }
          }
        },
        {
          title: '总金额',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, (+(params.row.managementFee - params.row.managementFeeWaive +
            params.row.consultingFee - params.row.consultingFeeWaive +
            params.row.penaltyFee - params.row.penaltyFeeWaive +
            params.row.lateFee - params.row.lateFeeWaive +
            params.row.principal - params.row.principalWaive +
            params.row.interest - params.row.interestWaive +
            params.row.preTerminateFee - params.row.preTerminateFeeWaive)).toFixed(2)
            )
          }
        },
        {
          title: '本金',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, params.row.principal - params.row.principalWaive)
          }
        },
        {
          title: '利息',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, params.row.interest - params.row.interestWaive)
          }
        },
        {
          title: '费用',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, params.row.managementFee - params.row.managementFeeWaive +
            params.row.consultingFee - params.row.consultingFeeWaive +
            params.row.penaltyFee - params.row.penaltyFeeWaive +
            params.row.lateFee - params.row.lateFeeWaive
            )
          }
        },
        {
          title: '还款日期',
          key: 'repaymentDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.paymentDate))
            ])
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 300,
          render: function (h, params) {
            var vm = this
            return h('div', {}, [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginLeft: '10px'
                },
                on: {
                  'click' () {
                    vm.modal1 = true
                    vm.planInfo = vm.repaymentPlanData[params.index]
                  }
                }

              }, '查看')

            ])
          }.bind(this)
        }
      ],
      currentPage: 1,
      pageSize: 20,
      totalPage: 0,
      $ajax: null,
      baseUrl: this.$appContext.marvels_core_loanapply
    }
  },
  methods: {
    pageChange (goPage) {
      this.initPage(goPage)
    },
    initPage (goPage) {
      if (parseFloat(goPage).toString() === 'NaN') {
        goPage = 1
      }
      var vm = this
      var url = vm.baseUrl + 'loanApply/customerservice/query/service/findPlanList'
      var param = {
        loanId: vm.$route.query.id,
        currentPage: goPage
      }
      vm.$ajax.post(url, param).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.repaymentPlanData = data.data.list || []
        vm.totalPage = re.data.data.total
        vm.pageSize = re.data.data.pageSize
        vm.currentPage = re.data.pageNum
      }).catch(er => {

      })
    },
    statusName (status) {
      if (status === 0) {
        return '正常'
      }
      if (status === 1) {
        return '逾期'
      }
      if (status === 2) {
        return '结清'
      }
      if (status === 3) {
        return '提前结清'
      }
      if (status === 10) {
        return '核销'
      }
    },
    repaymentType (repaymentType) {
      if (repaymentType === '3') { // 代偿
        return '结清'
      } else if (repaymentType === '4') {
        return '提前结清'
      } else {
        return '正常'
      }
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initPage(1)
  }
}
</script>
